<template>
	<header>
		<div class="search-return" @click="goBack">
			<
		</div>
		<div class="search-main">
			<form action="" onsubmit='return false'@keyup.enter="goSearchList">
				<input type="search" placeholder="学院风jk套装" v-model="searchVal" />
			</form>
		</div>
		<div class="search-btn" @click="goSearchList">搜索</div>
	</header>
</template>

<script setup>
	import { ref } from 'vue'
import {useRouter,useRoute} from 'vue-router'
	let router = useRouter()
	const route = useRoute();
	const goBack = ()=> {
		router.back()
	}
		let searchVal=ref(route.query.key||'')
		let goSearchList=()=>{
			 //console.log(searchVal.value)
			 if(!searchVal.value) return
		let searchList = localStorage.getItem('searchList') || '[]'
		let searchArr = JSON.parse(searchList)
		searchArr.unshift(searchVal.value)
		//ES6 Set去重
		const uniqueSet = new Set(searchArr)
		const newArray = Array.from(uniqueSet)
		localStorage.setItem('searchList',JSON.stringify(newArray))
			 router.push({name:'list',query:{key:searchVal.value}})
		}
</script>

<style scoped>
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 3rem;
		/* background-color:#f5f5f5; */
		border-bottom: 1px solid #e2ea13;
	}

	.search-return,
	.serach-btn {
		padding: 1rem;
		color: #0073ff;
	}

	.search-main {
		display: flex;
		align-items: center;
		width: 50%;
		height: 1rem;
	}

	.search-main form {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.search-main form input {
		width: 100%;
		height: 100%;
		padding: 0 0 0 0.3rem;
		border: 1px solid #ed0a0a;
		
		transition: border-color 0.3s ease;
		
		border-radius: 0.1875rem;
	}

	

	.search-btn {
		font-size: 1rem;
        margin: 1rem;
	}
</style>